<template>
  <div>
      <common-head title="个人中心"/>
      <div class="user">
        <img src="@/assets/imgs/background.jpg" alt="">
        <div class="posi" @click='toLogin'>
          <h3>Hi,欢迎来到花礼网</h3>
          <div class="login">登录/注册</div>
        </div>
      </div>
       <div class="order">
          <div class="order-top">
            <p @click="toOrder">我的订单</p>
            <p @click="toOrder">全部订单> </p>
          </div>
          <div class="order-bottom">
            <div>
              <img src="@/assets/imgs/fukuan.png" alt="">
              <p>待付款</p>
            </div>
            <div>
              <img src="@/assets/imgs/peisong.png" alt="">
              <p>待配送</p>
            </div>
            <div>
              <img src="@/assets/imgs/pingjia.png" alt="">
              <p>待评价</p>
            </div>
          </div>
        </div>
      <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '../../components/CommonHead.vue'
export default {
  data () {
    return {
    }
  },
  methods: {
    toLogin () {
      this.$router.push('/login')
    },
    toOrder () {
      this.$router.push('/order')
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.user{
  padding-top: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width: 100%;
    height: 150px;
  }
  .posi{
    position: absolute;
    h3{
      color: #fff;
    }
    .login{
      margin-top: 15px;
      width: 160px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #fff;
      border-radius: 20px;
    }
  }
}
.order-top{
  margin: 10px;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  background: #fff;
  border-radius: 5px;
  border-bottom: 1px solid #eee;
}
.order-bottom{
  margin: 10px;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  background: #fff;
  border-radius: 5px;
  p{
    font-size: 14px;
    margin-left: 6px;
    vertical-align:middle;
  }
}
</style>
